/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */

function getWeather(cityCode) {
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city: cityCode,
        }

    }).then(result => {
        console.log(result);
        const wobj = result.data
        //展示数据
        //1.阳历农历日期
        const dateStr = `<span class="dateShort">${wobj.date}</span>
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${wobj.dateLunar}</span>
        </span>`
        document.querySelector('.title').innerHTML = dateStr
        document.querySelector('.area').innerHTML = wobj.area
        //当天气温
        const nowWstr = `  <div class="tem-box">
        <span class="temp">
          <span class="temperature">${wobj.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${wobj.psPm25}</span>
          <span class="psPm25Level">${wobj.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${wobj.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${wobj.weather}</span>
          </li>
          <li class="windDirection">${wobj.windDirection}</li>
          <li class="windPower">${wobj.windPower}</li>
        </ul>
      </div>`
        document.querySelector('.weather-box').innerHTML = nowWstr
        const twobj = wobj.todayWeather
        const todayStr = ` <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${twobj.weather}</span>
          <span class="temNight">${twobj.temNight}</span>
          <span>-</span>
          <span class="temDay">${twobj.temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${twobj.ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${twobj.humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${twobj.sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${twobj.sunsetTime}</span>
        </li>
      </ul>`
        document.querySelector('.today-weather').innerHTML = todayStr
        //7天预报
        const dayForecast = wobj.dayForecast
        const Str = dayForecast.map(item => {
            const { date, dateFormat, temDay, temNight, weather, weatherImg, windDirection, windPower } = item
            return ` <li class="item">
            <div class="date-box">
              <span class="dateFormat">${dateFormat}</span>
              <span class="date">${date}</span>
            </div>
            <img src="${weatherImg}" alt="" class="weatherImg">
            <span class="weather">${weather}</span>
            <div class="temp">
              <span class="temNight">${temNight}</span>-
              <span class="temDay">${temDay}</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">${windDirection}</span>
              <span class="windPower">${windPower}</span>
            </div>
          </li>`
        }).join('')
        document.querySelector('.week-wrap').innerHTML = Str

    })
}
//默认进入就获取

getWeather('110100')

document.querySelector('.search-city').addEventListener('input', (e) => {
    console.log(e.target.value)
    //数据获取
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather/city',
        params: {
            city: e.target.value
        }
    }).then(result => {
        console.log(result)
        const searchStr = result.data.map(item => {
            return `<li class="city-item" data-code='${item.code}'>${item.name}</li>`
        }).join('')
        document.querySelector('.search-list').innerHTML = searchStr



    })
})
document.querySelector('.search-list').addEventListener('click', (e) => {
    if (e.target.classList.contains('city-item')) {
        const cityCode = e.target.dataset.code
        getWeather(cityCode)

    }
})